<template>
	<view>
		<!-- 选择学习计划 -->
		<view class="midMain" v-if="nowPlan.havePlan">
			<view class="studyPlan">
				<view class="title">{{nowPlan.bookName}}</view>
				<view class="dayShow">
					<view class="left">
						<view class="word">每日学习</view>
						<view class="num"><text>{{nowPlan.everyDayWordNum}}</text>词</view>
					</view>
					<view class="right">
						<view class="word">预计完成时间</view>
						<view class="num">{{nowPlan.expectTime}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 选择学习词书区域 -->
		<view class="studyBook">
			<view class="title">学习词书</view>
			<view class="scroll">
				<scroll-view scroll-x :show-scrollbar="false">
					<view class="scrollIner">
						<view class="scrollItem" @click="chooseBook(item.id)" v-for="(item) in book">
							<image mode="widthFix" :src="item.imgUrl"></image>
							<view v-if="bookId==item.id" class="triangle"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 选择单词和天数区域 -->
		<view class="dayAndWord">
			<!-- 中间选择中部分 -->
			<view class="checkMid">
				<image mode="widthFix" src="@/static/images/other/correct.png"></image>
			</view>
			<view class="topTitle">
				<view class="item">
					<view class="title">每日背单词</view>
					<scroll-view scroll-y scroll-with-animation="true" :scroll-into-view="wordNumId" @scroll="wordNumScroll"> 
						<view class="scrollCon">
							<view class="scrollItem" :id="wordNumChar[index]" v-for="(item,index) in wordNum">
								{{item == null ? '':item}}<text v-if="item!=null">个</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="item">
					<view class="title">完成天数</view>
					<scroll-view scroll-y scroll-with-animation="true" :scroll-into-view="wordDayId" @scroll="wordDayScroll">
						<view class="scrollCon">
							<view class="scrollItem" :id="wordNumChar[index]" v-for="(item,index) in wordDay">
								{{item == null ? '':item}}<text v-if="item!=null">天</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<!-- 学习该计划按钮 -->
		<view class="studyButton" @click="setPlan">
			<view class="word">学习改计划</view>
		</view>
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {getAll} from "@/api/bookApi.js";
	import {getNow,setPlan,importWord} from "@/api/planApi.js";
	import popup from "@/components/popup.vue";
	
	export default {
		components:{popup},
		data() {
			return {
				bookId:"0",
				wordNum:[,,5,10,15,20,25,30,35,40,45,50,,,,],
				wordNumChar:['a','b','c','d','e','f','g','h','i','j'],
				wordDay:[],
				wordNumId:"",
				wordDayId:"",
				book:[],
				nowPlan:{},
				themeColor:"",
				themeColorLess:"",
			};
		},
		methods:{
			chooseBook(bookId){
				this.bookId = bookId;
				this.book.forEach(item => {
					if (item.id == bookId){
						this.wordDay = item.wordDay;
						return;
					}
				})
			},
			wordNumScroll(e){
				this.wordDayId = String.fromCodePoint(Math.floor(e.detail.scrollTop / 28) + 97);
			},
			wordDayScroll(e){
				this.wordNumId = String.fromCodePoint(Math.floor(e.detail.scrollTop / 28) + 97);
			},
			/**
			 * 设置计划
			 */
			 setPlan(){
				let that = this;
				uni.showModal({
					title:"确认设置吗?",
					async success(res) {
						if (res.confirm) {
							let wordNum = that.wordNum[that.wordNumId.charCodeAt() - 95];
							let wordDay = that.wordDay[that.wordDayId.charCodeAt() - 95];
							console.log(wordNum,wordDay);
							let ans = (await setPlan(that.bookId,wordNum,wordDay)).data;
							console.log(ans);
							if (ans.code != 200) {
								that.$refs.popup._popError(ans.error);
								return;
							}
							ans = (await importWord(that.bookId)).data;
							console.log(ans);
							if (ans.code != 200) {
								that.$refs.popup._popError(ans.error);
								return;
							}
							getApp().globalData.switchIndex = true;
							uni.switchTab({
								url:"/pages/index/index"
							})
						} else {
							console.log("取消");
						}
					},
				})
			}
		},
		async mounted(){
			// 获取全部书籍
			let book = (await getAll()).data;
			console.log(book);
			if (book.code != 200) {
				this.$refs.popup._popError(book.error);
				return;
			}
			this.book = book.data;
			// 设置获取单词与时间比
			this.book.forEach(item => {
				let wordDay = [,,];
				this.wordNum.forEach(wordNum => {
					const day = Math.ceil(item.vocabulary / wordNum);
					wordDay.push(day);
				});
				wordDay.push(null);
				wordDay.push(null);
				wordDay.push(null);
				item.wordDay = wordDay;
			})
			// 获取当前计划
			let nowPlan = (await getNow()).data;
			console.log(nowPlan);
			if (nowPlan.code != 200) {
				this.$refs.popup._popError(nowPlan.error);
				return;
			}
			this.nowPlan = nowPlan.data;
			this.wordNumId = 'a';
			this.wordDayId = 'a';
			if (!this.nowPlan.havePlan){
				this.bookId = this.book[0].id;
				this.wordDay = this.book[0].wordDay;
			} else{
				this.chooseBook(this.nowPlan.planBookId);
			}
		},
		
		onLoad(){
			//获取主题颜色
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
		},
		
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-color;
	}
	
	//选择学习词书区域
	.studyBook{
		margin: 30rpx $both-sides 0 $both-sides;
		display: flex;
		flex-direction: column;
		
		.title{
			font-size: 36rpx;
			color: #49495E;
			font-weight: 600;
		}
		
		.scroll{
			margin-top: 30rpx;
			
			.scrollIner{
				display: flex;
				
				.scrollItem{
					margin-right: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 120rpx;
					}
					
					.triangle{
						width: 0px;
						height: 0px;
						border-bottom: $theme-color 8px solid;
						border-left: transparent 8px solid;
						border-right: transparent 8px solid;
						border-radius: 4rpx;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
	
	//选择学习计划
	.midMain{
		margin: 20rpx $both-sides 0 $both-sides;
		border-radius: 16rpx;
		background-color: white;
		
		.studyPlan{
			border-bottom: solid $border-color $border-size;
			
			.title{
				padding: 26rpx 0 0 14rpx;
				color: #49495E;
				font-size: 30rpx;
				font-weight: 600;
			}
			
			.dayShow{
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				font-size: 26rpx;
				.left{
					display: flex;
					flex-direction: column;
					padding-left: 14rpx;
					.word{
						color: #49495E;
					}
					.num{
						padding-top: 8rpx;
						text{
							color: $theme-color;
							font-weight: 600;
						}
					}
				}
				.right{
					display: flex;
					flex-direction: column;
					padding-right: 14rpx;
					.word{
						color: #49495E;
					}
					.num{
						padding-top: 8rpx;
						color: $theme-color;
						font-weight: 600;
					}
				}
			}
		}
	}
	
	//选择单词和天数区域
	.dayAndWord{
		margin: 16rpx $both-sides 0 $both-sides;
		background-color: white;
		border-radius: 16rpx;
		position: relative;
		.checkMid{
			height: 60rpx;
			width: 100%;
			background-color: rgba(211, 206, 209, 0.5);
			position: absolute;
			top: 230rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			image{
				width: 36rpx;
				margin-right: 20rpx;
			}
		}
		.topTitle{
			width: 100%;
			display: flex;
			.item{
				padding-top: 40rpx;
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				.title{
					font-size: 30rpx;
					color: #58595a;
				}
				
				scroll-view{
					height: 360rpx;
					margin-top: 30rpx;
					.scrollCon{
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.scrollItem{
							display: flex;
							justify-content: center;
							height: 60rpx;
							line-height: 60rpx;
							font-size: 28rpx;
							color: #9fa1a2;
						}
					}
				}
			}
		}
	}
	
	//学习该计划按钮
	.studyButton{
		margin-top: 50rpx;
		background-color: $theme-color;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		
		.word{
			font-size: 26rpx;
			color: white;
			letter-spacing: 3rpx;
		}
	}
	
</style>
